<template>
  <div>
    <h1>App</h1>
    <hr />

    <ul>
      <Item :node="tree" />
    </ul>

    <!-- <ul>
      <li>
        <div class="title">
          {{ tree.name }}
          <span>+</span>
        </div>
        <ul>
          <li v-for="(item, index) in tree.children" :key="index">
            <div class="title">
              {{ item.name }}
              <span>+</span>
            </div>
            <ul>
              <li v-for="(a, aindex) in item.children" :key="aindex">
                <div class="title">
                  {{ a.name }}
                  <span>+</span>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul> -->
  </div>
</template>

<script>
import Item from "./components/Item.vue";

export default {
  components: {
    Item,
  },

  data() {
    return {
      tree: {
        name: "菜单1",
        children: [
          {
            name: "菜单1-1",
            children: [
              {
                name: "菜单1-1-1",
              },
              {
                name: "菜单1-1-2",
              },
            ],
          },
          {
            name: "菜单1-2",
            children: [
              {
                name: "菜单1-2-1",
              },
              {
                name: "菜单1-2-2",
              },
            ],
          },
        ],
      },
    };
  },
};
</script>
